<script src="../../../../../../protects/guangxifupin-front/src/containers/App/index.jsx"></script>
<template>
  <div class="padding-middle">
    <el-card :body-style="{padding:'0px'}">
      <div class="search">
        <div class="input" style="display: none">
          <el-input v-model="input" size="small" placeholder="请输入内容" style="width: 300px;height: 20px;margin-right: 15px"/>
          <span style="color: #fff;font-size: 14px">考试类型:</span>
          <el-select v-model="option1" placeholder="请选择考试类型" size="small" style="margin-right: 15px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span style="color: #fff;font-size: 14px">课程科目:</span>
          <el-select v-model="option2" placeholder="请选择课程科目" size="small">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-button style="margin-left: 15px" plain size="small" icon="el-icon-search">查询</el-button>
        </div>
        <div class="edit">
          <router-link to="/coursemanagement/addCourseClassify/edit"><el-button type="success" size="small">添加课程分类</el-button></router-link>
        </div>
      </div>
      <el-table
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="150"/>
        <el-table-column
          prop="name"
          label="课程分名称"/>
        <el-table-column
          prop="examType"
          label="课程分类"/>
        <el-table-column
          :formatter="toTime"
          prop="createTime"
          label="添加时间"/>
        <el-table-column
          :formatter="toTime"
          prop="updateTime"
          label="修改时间"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small">查看</el-button>-->
            <router-link :to="'/coursemanagement/addCourseClassify/edit/' + scope.row.name+'/'+scope.row.examType"><el-button size="small" type="text">编辑</el-button></router-link>
            <el-button type="danger" size="small" plain @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="page" :page-size="10" :total="total" background layout="prev, pager, next" @current-change="changePage" />
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
export default {
  data() {
    return {
      page: 1,
      total: 0,
      input:'',
      items: [],
      option1:'',
      option2:'',
      options1: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      options2:[]
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    queryList() {
      axios.get(`/getCourseCategoryList/${"all"}/${"all"}/${this.page}/${10}`).then(res => {
        if (res.success) {
          this.total=res.total
          this.items=res.data
        }
      })
    },
    /*
  *   删除特定id行
  * */
    deleteItem(row) {
      if (!confirm('确定删除')) {
        return
      }
      axios.delete(`/delCourseCategory/${row.id}`).then(res => {
        if (res.success) {
          this.page = 1
          this.queryList()
        }
      })
    },
    changePage(page) {
      this.page=page
      this.queryList()
    }
  }

}
</script>

<style lang="scss" scoped>
  .cover {
    width: 100px;
    height: 75px;
    box-shadow: 2px 2px 2px #eee;
  }
  .search{
    background-color: #fff;
    height: 60px;
    display: flex;
    padding: 15px 10px;
    box-sizing: border-box;
    .input{
      flex: 8;
    }
    .edit{
      flex: 2;
      text-align: right;
      padding-right: 10px;
    }
  }
</style>
